<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>催办</title>
    <script src="../../js/header.js"></script>
    <style type="text/css">
        html, body, #app {
            padding: 0px;
            margin: 0px;
        }

        #app {
            border-top: 3px solid #0D9AFF;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0 rgba(200, 200, 200, 0.50);
            padding: 25px;
            background: url(../../images/bg.png) no-repeat;
            background-size: cover;
            /*background-attachment: fixed;*/
        }

        .tab-title {
            font-size: 16px;
            font-weight: bold;
            border-left: 4px solid #0D9AFF;
            font-family: PingFangSC-Medium;
            padding-left: 10px;
            margin-bottom: 20px;
        }

        .pagination {
            text-align: center;
            margin-top: 30px;
        }

        .el-dialog__footer {
            padding: 10px 20px 20px;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .el-dialog__body {
            color: rgb(96, 98, 102);
            font-size: 14px;
            word-break: break-all;
            padding: 0px 20px;
        }

        .el-input__inner {
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
        }
    </style>
</head>

<body>
<div v-cloak id="app">
    <!--待办-->    
    <!--已办-->
    <!--查看弹窗-->
    <div style="margin-top: 10px;">
<el-form :model="addForm" :rules="rules" ref="addForm" label-width="150px">
            <el-row>
                <el-col :span="4" class="tab-title">
                    公示通报信息
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                    <el-form-item label="创建人:" prop="createUser" label-width="130px">
                        <el-input v-model="addForm.createUser " placeholder="" :disabled="addFormDisabled"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9">
                    <el-form-item label="创建人单位:" prop="createUserUnit" label-width="190px">
                        <el-input v-model="addForm.createUserUnit" placeholder="" :disabled="addFormDisabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9">
                    <el-form-item label="创建时间:" prop="createTime" label-width="130px">
                        <el-date-picker
                                v-model="addForm.createTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="创建时间"
                                :disabled="addFormDisabled">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="公开到的机构:" prop="publishSheng" label-width="190px">
                        <el-select v-model="addForm.publishSheng" placeholder="请选择" collapse-tags :disabled="addFormDisabled">
                            <el-option
                                    v-for="item in orgs"
                                    :key="item.appId"
                                    :label="item.dictName"
                                    :value="item.dictName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="14">
                    <el-form-item label="公开地址类型:" prop="publicType" label-width="120px">
                        <el-radio-group v-model="addForm.publicType" :disabled="addFormDisabled">
                            <el-radio label="0">服务门户</el-radio>
                            <el-radio label="1" >公众门户</el-radio>
                            <el-radio label="2" >服务门户和公众门户</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="公布类别:" prop="isPublic" label-width="120px">
                        <el-radio-group v-model="addForm.isPublic" :disabled="addFormDisabled">
                            <el-radio label="0">公示通报</el-radio>
                            <el-radio label="1">标准规范</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="22">
                    <el-form-item label="标题:" prop="title" label-width="130px">
                        <el-input v-model="addForm.title" placeholder="" :disabled="addFormDisabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form-item label="内容:" prop="publicityContent" label-width="130px">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 8, maxRows: 8}"
                                placeholder="请输入内容"
                                v-model="addForm.publicityContent"
                                :disabled="addFormDisabled">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form-item label="附件:" label-width="130px">
                        <iframe width="100%" scrolling="no" style="height: 200px;border: none;"   :src="link"></iframe>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
				<el-col :span="22">
					<div style="float:right;">							
						<el-button type="info" size="small" style="width: 60px;height: 30px;"
								   @click="viewCancel()">关闭
						</el-button>
					</div>
				</el-col>
			</el-row>
        </el-form>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                uuid: '',// uuid
                link: '', // 附件iframe
                linkId: '', //项目ID
                linkStatus: '', //状态码
                // 用户登录信息
                userName: '', // 用户登录名称
                orgName: '', // 组织名称对应项目地址
                orgLevel: '', // 组织等级对应 地市级、省级、中国级地震局用户
                addForm: {
                    id:'',
                    createUser:'',
                    createUserUnit:'',
                    createTime:'',
                    title:'',
                    publicityContent:'',
                    publicType:'',
                    publishSheng:'',
                    isPublic:''
                },
                rules: {
                    createUser: [{
                        required: true,
                        message: "创建人必填",
                        trigger: "blur"
                    }],
                    createUserUnit: [{
                        required: true,
                        message: "创建人单位必填",
                        trigger: "blur"
                    }],
                    createTime: [{
                        required: true,
                        message: "创建时间必填",
                        trigger: "blur"
                    }],
                    title: [{
                        required: true,
                        message: "标题必填",
                        trigger: "blur"
                    }],
                    publicityContent: [{
                        required: true,
                        message: "内容必填",
                        trigger: "blur"
                    }],
                    publicType: [{
                        required: true,
                        message: "公开地址类型必填",
                        trigger: "blur"
                    }],
                    publishSheng: [{
                        required: true,
                        message: "公开到的机构类型必填",
                        trigger: "blur"
                    }],
                    isPublic: [{
                        required: true,
                        message: "公开到的机构类型必填",
                        trigger: "blur"
                    }]
                }
            }
        },
        created() {
            // 获取登录用户信息
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.orgLevel = userInfo.orgLevel;
            // 中国地震局 ==> 中国, 山东省-济南市地震局 ==> 山东省-济南市
            this.orgName = userInfo.orgName.replace("地震局", "");
            this.userName = userInfo.loginName;
            console.log("用户名：" + this.userName);
            console.log("组织等级：" + this.orgLevel);
            console.log("组织名称：" + this.orgName);
        },
        mounted() {
            console.log(window.location.href);
            var url = window.location.href;
            this.linkId = url.split("?")[1].split("=")[1];
            console.log(this.linkId)
            this.uuid = this.linkId;
            this.link = "../upload/annex.html?uuid=" + this.uuid + "&flag=0";
            this.getData();
        },
        methods: {
            // 加载数据
            getData() {
                axios({
                    method: 'get',
                    url: '/dzjjcss/publicity/info',
                    params: {
                        id: this.linkId
                    }
                }).then(response => {
                        console.log(response);
                        console.log(response.data);
                        if (response.data.code == 200) {
                            this.addForm = response.data.data;							
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 审定完成确认方法
            checkonSubmit(formName) {
                console.log(this.checkcommonproject.reId);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
		                axios({
		                    method: 'post',
		                    url: '/dzjap/generecord/check',
		                    // data中必须有reId
		                    data: this.checkcommonproject
		                }).then((res) => {
		                    console.log(res);
		                    parent.vm.getData();
		                    if (res.data.code == 200) {
		                        // 提交成功将要执行的代码
		                        this.$message({
		                            message: '审定成功',
		                            type: 'success'
		                        });
		                        this.checkCancel();
		                    }
		                });
		            } else {
                        this.$message({
                            message: 'error!',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            // 调用父页面方法关闭弹窗
            checkCancel() {
                parent.vm.publicCancel();
            },
            viewCancel() {
                parent.vm.publicCancel();
            },
            handleChange(file, fileList) {
                this.fileList = fileList.slice(-3);
            }
        }

    })
</script>
</body>
</html>